#region show
<template>
  <q-tree :data="data">
    <template #default="{ node }">
      {{ node.key }}-------{{ node.label }}------自定义内容
      <q-icon><Trash></Trash></q-icon>
    </template>
  </q-tree>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TreeOption } from 'qing-design'
import { Trash } from '@vicons/ionicons5'

function createData(level = 4, baseKey = ''): TreeOption[] | undefined {
  if (!level) return undefined
  return new Array(6 - level).fill(null).map((_, index) => {
    const key = '' + baseKey + level + index
    return {
      label: createLabel(level),
      key,
      children: createData(level - 1, key)
    }
  })
}

function createLabel(level: number): string {
  if (level === 4) return '道生一'
  if (level === 3) return '一生二'
  if (level === 2) return '二生三'
  if (level === 1) return '三生万物'
  return ''
}

const data = ref<TreeOption[] | undefined>(createData())
</script>
<style scoped>
:deep(.q-tree-node__label) {
  display: flex;
  justify-content: space-between;
}
</style>
#endregion show
